<template>
  <el-space direction="vertical" style="width: 100%" size="large">
    <div ref="chart" style="width: 400px; height: 345px;"></div>
  </el-space>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue';
import * as echarts from 'echarts';
import http from "@/utils/http.js";

const chart = ref(null);

onBeforeUnmount(() => {
  // 清理图表实例
  if (chart.value) {
    chart.value.dispose();
  }
});

// 指定图表的配置项和数据
const option = {
  backgroundColor: 'transparent',
  title: {
    left: 'center',
    textStyle: {
      color: 'white',
      fontSize: 16,
      fontWeight: 'bold'
    }
  },
  tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(5, 31, 87, 0.9)',
    textStyle: {
      color: 'white'
    },
    borderColor: 'rgba(255, 255, 255, 0.2)',
    borderWidth: 1
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    textStyle: {
      color: 'white',
      fontSize: 12
    }
  },
  series: [
    {
      name: '数量',
      type: 'pie',
      radius: '45%',
      center: ['60%', '50%'],
      data: [],
      label: {
        color: '#A0AEC0',
        fontSize: 12
      },
      labelLine: {
        lineStyle: {
          color: '#A0AEC0'
        }
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

const initChart = () => {
  // 基于准备好的dom，初始化echarts实例
  const chartInstance = echarts.init(chart.value);

  // 使用刚指定的配置项和数据显示图表
  chartInstance.setOption(option);

  // 将 chart 实例绑定到 ref 上，以便在卸载时清理
  chart.value = chartInstance;
};

getData()

function getData() {
  http.get("/statisticalReportForms/productTypeProportionOfChar").then(res => {
    option.series[0].data = res.data
    option.title.text = '商品类型占比'
    initChart();
  })
}

</script>

<style scoped>
/* 可以添加样式 */
</style>